<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>游戏详情</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="mob/css/game_detail.css" rel="stylesheet" media="screen">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/flexslider/2.7.1/flexslider.min.css" rel="stylesheet">
    <link rel="stylesheet" href="lib/layer/need/layer.css">
</head>
<body style="overflow-x: hidden;overflow-y: hidden">
<div id="app">
    <div id="flexslider" style="border: 0px;margin: 0px">
        <ul class="slides">
            <li  v-for="(swiperLoop,key) in swiperLoops"  :style="{backgroundImage: 'url('+swiperLoop.gamePic+')'}">
                <div class="main">
                    <div class="content">
                        <div class="box-title">
                        </div>
                        <div class="box-start">
                            <a class="start-game" :href="'iframe.html?gameId='+swiperLoop.gameId+''">
                                    <i class="fa fa-play " style="color: green"></i>
                                    <span>开始游戏</span>
                            </a>
                        </div>
                        <div class="box-button-group">
                            <div class="btn-group">
                                <button class="btn" @click="suiji"><i class="fa fa-random fa-2x"></i></button>
                                <button class="btn" @click="showCom(key)">
                                    <i class="fa fa-commenting-o fa-2x"></i>
                                </button>
                                <button class="btn" @click="back"><i class="fa fa-rotate-left fa-2x"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="box-comment" style="display: none">
        <div class="hiddenBox">
            <div class="comment-number">
                <div class="number" style="font-size: 15px">{{commentNumber}} 条评论</div>
                <button class="left" id="closeComment" @click="closeComment"><i class="fa fa-close "></i></button>
            </div>
            <div class="comment-items">
                <div class="comment-item" v-for="comment in commentList">
                    <div>
                        <img :src="comment.userIcon" alt="用户头像" style="width: 40px;height: 40px"/>
                        <div class="neirong">
                            <span class="author">{{comment.userName}}</span>
                            <span class="comment-content">{{comment.commentContent}}</span>
                        </div>
                    </div>
                    <span class="comment-time">{{comment.timeBefore}}</span>
                </div>
            </div>
            <div class="add-comment">
                <input class="input" id="content" placeholder="请留下评论..." required="required">
                <button id="addComment" @click="addComment()">确定</button>
            </div>
        </div>
    </div>

</div>

<!--javascript-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/flexslider/2.7.1/jquery.flexslider.min.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
<script src="mob/js/common.js"></script>
<script src="mob/js/wx_share.js"></script>
<script src="mob/js/game_detail.js" type="text/javascript"></script>
<script src="lib/layer/layer.js"></script>
</body>
</html>
